<template>
	<view>
		<view class="imgView">
			<swiper autoplay :current="currentIndex" interval="5000"
				style="width: 100%;height: 200px;text-align: center;">
				<swiper-item v-for="(img,index) in formData.image" :key="index">
					<image :src="toShowImage(img)" style="width: 200px;height:200px;" mode="aspectFit"
						@click.stop="previewImage(img)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goodsView">
			<view class="name">
				<text>{{formData.name}}</text>
			</view>

			<view v-for="(tag,index) in tags "
				style="display: inline-block;margin:10rpx;border: 1px solid #926b6a;padding: 10rpx;border-radius: 8px;position: relative;">
				<label style="color: #926b6a;">{{tag}}</label>
			</view>

			<view class="createTime">
				<text>{{formData.create_time_fmt}}</text>
			</view>
			<view class="address">
				<label>商品地址：</label>
				<text>{{formData.address}}</text>
			</view>

			<view class="price">
				<text class="left">￥</text>
				<text class="right">{{formData.price.toLocaleString()}}</text>
			</view>

			<view class="code">
				<label>商品码：</label>
				<text style="color: #515151;">{{formData.goods_code}}</text>
				<image v-if="formData.goods_code" @click="copyGoodsCode(formData.goods_code)" src="/static/copy.png"
					style="width: 20px;height:20px;vertical-align: middle; margin-left: 20rpx;"></image>
			</view>

			<view class="description">
				<text>{{formData.goods_description}}</text>
			</view>

			<view class="call_way">
				<view class="call01">
					<label style="font-size: 20px;">联系方式</label>
					<image @click="copyCallWay('all','')" src="/static/copy.png"
						style="width: 20px;height:20px;vertical-align: middle; margin-left: 10rpx;"></image>

				</view>
				<view class="call_way_in" v-for="(item,index) in call_ways" :key="index">
					<label class="left">{{item.way+":"}}</label>
					<view class="call02">
						<text class="right">{{item.value}}</text>
						<image v-if="item.value" @click="copyCallWay('one',item.value)" src="/static/copy.png"
							style="width: 20px;height:20px;vertical-align: middle; margin-left: 20rpx;"></image>
					</view>
				</view>
			</view>




		</view>
	</view>
</template>

<script>
	import {
		showImage,
		findGoodsById
	} from '@/apis/controll.js'
	export default {
		data() {
			return {
				call_ways: [{
					way: '邮箱',
					value: '',
				}, {
					way: 'QQ',
					value: '',
				}, {
					way: '微信',
					value: '',
				}, {
					way: '手机号',
					value: '',
				}, ],
				formData: {
					name: '',
					goods_description: '',
					tags: '',
					price: 0,
					address: '',
					call_way: '',
				},
				tags: [],
				currentIndex: 0,
			}
		},
		onLoad(e) {
			var id = e.id;
			// var id = 5;
			findGoodsById(id).then(res => {
				if (res?.result_code == "0") {
					this.formData = res.data;
					this.formData.id = res.data.id;
					this.formData.name = res.data.name;
					this.formData.goods_description = res.data.goods_description;
					this.formData.tags = res.data.tags;
					this.formData.price = res.data.price;
					this.formData.address = res.data.address;
					this.formData.call_way = res.data.call_way;
					this.formData.image = res.data.image;

					if(this.formData.tags){
						this.tags = this.formData.tags.split(",");
					}
					this.call_ways = JSON.parse(this.formData.call_way)

					var images = JSON.parse(this.formData.image);
					this.formData.image = images;
				}
			})
		},
		methods: {
			copyGoodsCode(code) {
				uni.setClipboardData({
					data: code,
					success: function() {
						uni.showToast({
							title: "商品码已复制",
							icon: 'none'
						})
					}
				});
			},
			copyCallWay(type,content) {
				if(type==="all"){
					for(var index in this.call_ways){
						var call = this.call_ways[index]
						content += call.way+": "+call.value+"\r\n";
					}
				}

				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: "联系方式已复制",
							icon: 'none'
						})
					}
				});
			},
			previewImage(image) {
				let imgsArray = [];
				imgsArray[0] = showImage(image.path + image.name);
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			toShowImage(image) {
				return showImage(image.path + image.name)
			},
		}
	}
</script>

<style scoped lang="less">
	.goodsView {
		padding: 20px 10rpx;
	}

	.name {
		text {
			font-size: 20px;
			font-weight: 600;
			color: #333333;

			word-wrap: break-word;
		}
	}

	.tags {
		margin-top: 10rpx;
	}

	.createTime {
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.address {
		margin-top: 20rpx;

		label {
			color: #8a8a8a;
		}

		text {
			font-size: 16px;
			color: #24613b;
			word-wrap: break-word;
		}
	}

	.price {
		color: #FF6347;
		margin-top: 20rpx;

		.left {
			font-size: 15px;
		}

		.right {
			font-size: 26px;
		}
	}

	.code {
		margin-top: 20rpx;

		label {
			color: #8a8a8a;
		}

		text {}
	}

	.description {
		margin-top: 20rpx;
		word-wrap: break-word;
		white-space: pre-wrap;

		font-size: 16px;
		color: #5f5f5f;
	}

	.call_way {
		margin-top: 40rpx;

		.call_way_in {
			margin-top: 10rpx;
			border-bottom: 1px dotted #c1caca;
			padding: 20rpx;

			.left {
				width: 60px;
				display: inline-block;
			}

			.right {
				margin-left: 20rpx;
			}
		}

		.call01{
			display: inline-flex;
			align-items: center;
		}

		.call02 {
			display: inline-flex;
			align-items: center;
		}
	}
</style>